<template>
    <li class="item-wrapper">
        <div class="item-content">
            <div class="row1">
                <span class="ib title">{{label}}</span>
                <span class="ib rate">{{params.rate}}</span>
            </div>
            <div class="row">
                <div class="ib icon">
                    <div class="img" :class="{[icon]: true}"></div>
                </div>
                <h4 class="ib num">{{params.count}}人</h4>
            </div>
            <div class="row btn-row">
                <div class="ib" style="text-align: right; padding-right: 10px;">
                    <div :class="{lbtn: select === 0, rbtn: select === 1}" @click="btnClick(0)">{{btns[0]}}</div>
                </div>
                <div class="ib" style="text-align: left; padding-left: 10px;">
                    <div :class="{lbtn: select === 1, rbtn: select === 0}" @click="btnClick(1)">{{btns[1]}}</div>
                </div>
            </div>
        </div>
    </li>
</template>

<script>
    export default {
        name: "AnalysisItem",
        data() {
            return {
                select: 0,
                params: {
                    count: 0,
                    rate: ''
                }
            }
        },
        props: {
            label: String,
            icon: String,
            btns: Array,
            data: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        updated() {
            this.params = this.data[this.select];
        },
        created() {
            this.params = this.data[this.select];
        },
        methods: {
            btnClick(i) {
                if (this.select !== i) {
                    this.select = i;
                    this.params = this.data[i];
                }
            }
        }
    };
</script>

<style scoped lang="scss">
    @import "../../../assets/scss/define";
    $count: 3;
    $p: 5px * 2;
    .item-wrapper {
        width: calc((100% - #{$p}) / #{$count});

        .item-content {
            position: relative;
            width: 100%;
            height: 120px;
            background-color: #ffffff;
            padding: 5px;

            .ib {
                display: inline-block;
                vertical-align: middle;
                width: 50%;
            }

            .row1 {
                padding: 0 5px;
                height: 30px;

                .title {
                    text-align: left;
                }

                .rate {
                    text-align: right;
                }
            }

            .row {
                height: calc((100% - 30px) / 2);

                > .icon {
                    text-align: right;
                    padding-right: 30px;

                    > .img {
                        display: inline-block;
                        vertical-align: middle;
                        width: 35px;
                        height: 35px;
                        background-color: rgba($base-color, 0.5);
                        border-radius: 50%;
                        background-repeat: no-repeat;
                        background-position: center;

                        &.book {
                            background-image: url("../../../assets/imgs/analysis/book.svg");
                            background-position: center 8px;
                            background-size: 65%;
                        }

                        &.user {
                            background-image: url("../../../assets/imgs/analysis/user.svg");
                            background-size: 80%;
                        }

                        &.buiding {
                            background-image: url("../../../assets/imgs/analysis/buiding.svg");
                            background-size: 80%;
                        }

                        &.settings {
                            background-image: url("../../../assets/imgs/analysis/settings.svg");
                            background-position: center 8px;
                            background-size: 60%;
                        }
                    }
                }

                > .num {
                    text-align: left;
                    padding-left: 5px;
                    font-size: 18px;
                }

                .lbtn, .rbtn {
                    display: inline-block;
                    vertical-align: middle;
                    text-align: center;
                    border-radius: $border-radius;
                    font-size: 14px;
                    width: 5em;
                    padding: 3px 2px;
                }

                .lbtn {
                    background-color: $base-color;
                    color: #ffffff;
                }

                .rbtn {
                    background-color: #ffffff;
                    color: $base-color;
                    border: 1px solid $base-color;
                }

                &.btn-row {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
    }
</style>
